<template>
    <LayOut :bread="[{
        url: '/bill',
        title: '账单',
    }, {
        title: '账单详情',
    }]">
        <el-descriptions :column="1" border>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        id
                    </div>
                </template>
                {{ billOj?.id }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        交易时间
                    </div>
                </template>
                {{ dayjs(billOj?.payTime).format("YYYY-MM-DD HH:mm:ss") }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        支付平台
                    </div>
                </template>
                {{ getPaymentPlatform(billOj?.paymentPlatform) }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        收支
                    </div>
                </template>
                {{ getType(billOj?.type) }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        交易类型
                    </div>
                </template>
                {{ getTransactionType(billOj?.transactionType) }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        交易人
                    </div>
                </template>
                {{ billOj?.trader }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        交易订单号
                    </div>
                </template>
                {{ billOj?.transactionOrderNumber }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        支付方式
                    </div>
                </template>
                {{ billOj?.paymentMethod }}
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        金额
                    </div>
                </template>
                {{ billOj?.money }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        备注
                    </div>
                </template>
                {{ billOj?.notes }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        商家订单号
                    </div>
                </template>
                {{ billOj?.merchantOrderNumber }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        交易账户
                    </div>
                </template>
                {{ billOj?.tradingAccount }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        标签
                    </div>
                </template>
                <el-select v-model="tags" multiple placeholder="请选择标签">
                    <template #header>
                        <div style="display: flex;">
                            <el-space size="large">
                                <el-input v-model="label" placeholder="请输入新增标签" clearable />
                                <el-button type="primary" @click="addTagHandle">新增标签</el-button>
                            </el-space>
                        </div>
                    </template>
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        说明
                    </div>
                </template>
                <el-input v-model="instructions" type="textarea" :rows="3" placeholder="Please input" />

            </el-descriptions-item>
        </el-descriptions>
        <div class="func">
            <el-space size="large">
                <el-button size="large" type="primary" @click="updateBillHandle">确认</el-button>
                <el-button size="large" >清空</el-button>
            </el-space>
        </div>
    </LayOut>
</template>
<script setup lang="ts">
import LayOut from '../components/LayOut.vue'
import { computed, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import {
    Iphone,
    Location,
    OfficeBuilding,
    Tickets,
    User,
} from '@element-plus/icons-vue'
import type { ComponentSize } from 'element-plus'
import { ElLoading, ElMessage } from 'element-plus'
import service from '../service/index'
import { to } from '../plugin/index'
import type { IBillItemDataModal } from '../type/bill'
import dayjs from 'dayjs'
import { typeOpt, paltformOpt, transcation_classification_enum } from '../assets/ts'

const { getBill, addTag, getTags, updateBill } = service;
const route = useRoute();
const { id } = route.query;

const billOj = ref<IBillItemDataModal>()
const tags = ref<number[]>([])
const instructions = ref('')
const label = ref('')

const options = ref<{ id: string, label: string, value: number }[]>([]);

const getPaymentPlatform = (val?: number) => {
    const item = paltformOpt.find(item => item.value === val);
    if (item) {
        return item.label;
    }
    return val;
}

const getType = (val?: number) => {
    const item = typeOpt.find(item => item.value === val);
    if (item) {
        return item.label;
    }
    return val;
}

const getTransactionType = (val?: number) => {
    const item = transcation_classification_enum.find(item => item.value === val);
    if (item) {
        return item.label;
    }
    return val;
}

const getBillHandle = async () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const [res, err] = await to(getBill({ id } as { id: string }));
    loading.close();
    const result = res.data;
    if (!err && result.code === 0) {
        billOj.value = result.data;
        if(result.data.tags) {
            const tagsArr = result.data.tags.split(',');
            tags.value = tagsArr.map((item: string) => Number(item));
            instructions.value = result.data.instructions;
        }
    } else {
        ElMessage.error('获取账单列表数据失败');
        console.error(err);
    }
}

const getTagsHandle = async () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const [res, err] = await to(getTags());
    loading.close();
    const result = res.data;
    if (!err && result.code === 0) {
        console.log(result);
        options.value = result.data;
    } else {
        ElMessage.error('获取失败');
        console.error(err);
    }
}

const addTagHandle = async () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const [res, err] = await to(addTag({ label: label.value }));
    loading.close();
    const result = res.data;
    if (!err && result.code === 0) {
        ElMessage.success('新增成功');
        getTagsHandle();
    } else {
        ElMessage.error('新增失败');
        console.error(err);
    }
}

const updateBillHandle = async () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const [res, err] = await to(updateBill({ tags: tags.value.join(','), instructions: instructions.value, id: id as string }));
    loading.close();
    const result = res.data;
    if (!err && result.code === 0) {
        ElMessage.success('更新成功');
        getBillHandle();
    } else {
        ElMessage.error('更新失败');
        console.error(err);
    }
}

onMounted(() => {
    console.log(id);

    if (id) {
        getBillHandle();
        getTagsHandle();
    }
})

</script>

<style scoped>
.el-descriptions {
    /* margin-top: 20px; */
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    /* margin-top: 20px; */
}

.func {
    display: flex;
    justify-content: end;
    padding: 20px;
}
</style>../type/course